<template>
  <s-layout title="志愿团队" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Search & Filter Bar -->
    <view class="top-bar">
      <view class="search-box">
        <input
          v-model="state.searchKeyword"
          class="search-input"
          placeholder="搜索团队名称..."
          @confirm="handleSearch"
        />
        <text class="search-icon">🔍</text>
      </view>
      <view class="filter-icon" @tap="state.showFilter = true">
        <text>筛选</text>
      </view>
    </view>

    <!-- Category Tabs -->
    <su-sticky bgColor="#f5f5f5">
      <view class="tab-bar">
        <view
          v-for="(tab, index) in state.tabs"
          :key="index"
          :class="['tab-item', { active: state.activeTab === index }]"
          @tap="handleTabChange(index)"
        >
          {{ tab }}
        </view>
      </view>
    </su-sticky>

    <!-- Team Stats -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-value">{{ state.stats.totalTeams }}</text>
        <text class="stat-label">注册团队</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ state.stats.totalMembers }}</text>
        <text class="stat-label">志愿者总数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ state.stats.totalActivities }}</text>
        <text class="stat-label">活动总数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ state.stats.totalHours }}</text>
        <text class="stat-label">服务总时长</text>
      </view>
    </view>

    <!-- Team List -->
    <view class="team-list">
      <view
        v-for="team in state.filteredTeams"
        :key="team.id"
        class="team-card"
        @tap="handleTeamClick(team)"
      >
        <view class="team-header">
          <view class="team-logo">{{ team.logo }}</view>
          <view class="team-info">
            <view class="team-name-row">
              <text class="team-name">{{ team.name }}</text>
              <view v-if="team.verified" class="verified-badge">
                <text>✓</text>
              </view>
            </view>
            <view class="team-type">{{ team.type }}</view>
          </view>
          <button class="follow-btn" :class="{ followed: team.followed }" @tap.stop="handleFollow(team)">
            {{ team.followed ? '已关注' : '+ 关注' }}
          </button>
        </view>

        <view class="team-desc">{{ team.description }}</view>

        <view class="team-tags">
          <view v-for="tag in team.tags" :key="tag" class="tag">{{ tag }}</view>
        </view>

        <view class="team-stats">
          <view class="stat">
            <text class="stat-icon">👥</text>
            <text class="stat-text">{{ team.members }}人</text>
          </view>
          <view class="stat">
            <text class="stat-icon">📅</text>
            <text class="stat-text">{{ team.activities }}场活动</text>
          </view>
          <view class="stat">
            <text class="stat-icon">⏱️</text>
            <text class="stat-text">{{ team.hours }}小时</text>
          </view>
          <view class="stat">
            <text class="stat-icon">⭐</text>
            <text class="stat-text">{{ team.rating }}分</text>
          </view>
        </view>

        <view class="team-footer">
          <view class="team-leader">
            <text class="leader-label">团队负责人:</text>
            <text class="leader-name">{{ team.leader }}</text>
          </view>
          <button class="join-btn" @tap.stop="handleJoin(team)">申请加入</button>
        </view>
      </view>
    </view>

    <!-- Filter Popup -->
    <su-popup :show="state.showFilter" type="bottom" round @close="state.showFilter = false">
      <view class="filter-popup">
        <view class="popup-header">
          <text class="popup-title">筛选团队</text>
          <text class="reset-btn" @tap="handleResetFilter">重置</text>
        </view>

        <view class="filter-section">
          <text class="section-title">团队类型</text>
          <view class="filter-options">
            <view
              v-for="(type, idx) in state.teamTypes"
              :key="idx"
              :class="['option-item', { active: state.selectedType === idx }]"
              @tap="state.selectedType = idx"
            >
              {{ type }}
            </view>
          </view>
        </view>

        <view class="filter-section">
          <text class="section-title">团队规模</text>
          <view class="filter-options">
            <view
              v-for="(size, idx) in state.teamSizes"
              :key="idx"
              :class="['option-item', { active: state.selectedSize === idx }]"
              @tap="state.selectedSize = idx"
            >
              {{ size }}
            </view>
          </view>
        </view>

        <view class="popup-footer">
          <button class="confirm-btn" @tap="handleApplyFilter">确定</button>
        </view>
      </view>
    </su-popup>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  searchKeyword: '',
  activeTab: 0,
  tabs: ['全部', '志愿服务', '文化艺术', '医疗健康', '教育培训', '科技服务'],
  showFilter: false,
  selectedType: 0,
  selectedSize: 0,
  teamTypes: ['全部类型', '志愿服务', '文化艺术', '医疗健康', '教育培训', '科技服务', '环保公益'],
  teamSizes: ['全部规模', '10人以下', '10-50人', '50-100人', '100人以上'],
  stats: {
    totalTeams: 156,
    totalMembers: '5.2万',
    totalActivities: 1200,
    totalHours: '8.6万'
  },
  teamList: [
    {
      id: 1,
      name: '海城志愿者协会',
      logo: '🤝',
      type: '志愿服务团队',
      description: '致力于社区志愿服务，组织各类公益活动，传递爱心，传播文明。',
      tags: ['志愿服务', '公益活动', '社区建设'],
      members: 328,
      activities: 156,
      hours: 5200,
      rating: 4.9,
      leader: '张主任',
      verified: true,
      followed: false,
      category: '志愿服务'
    },
    {
      id: 2,
      name: '文明社区艺术团',
      logo: '🎭',
      type: '文化艺术团队',
      description: '专注文艺表演和文化传承，为社区居民提供丰富多彩的文化活动。',
      tags: ['文艺演出', '文化传承', '社区文化'],
      members: 85,
      activities: 42,
      hours: 1280,
      rating: 4.8,
      leader: '李团长',
      verified: true,
      followed: false,
      category: '文化艺术'
    },
    {
      id: 3,
      name: '爱心医疗服务队',
      logo: '🏥',
      type: '医疗健康团队',
      description: '由专业医护人员组成，提供免费义诊、健康咨询和急救培训服务。',
      tags: ['义诊服务', '健康咨询', '急救培训'],
      members: 52,
      activities: 68,
      hours: 2100,
      rating: 4.9,
      leader: '王医生',
      verified: true,
      followed: true,
      category: '医疗健康'
    },
    {
      id: 4,
      name: '阳光助学志愿团',
      logo: '📚',
      type: '教育培训团队',
      description: '关注青少年教育，提供课业辅导、兴趣培养和心理辅导等服务。',
      tags: ['教育辅导', '青少年成长', '心理关怀'],
      members: 125,
      activities: 89,
      hours: 3560,
      rating: 4.7,
      leader: '陈老师',
      verified: true,
      followed: false,
      category: '教育培训'
    },
    {
      id: 5,
      name: '科技创新服务团',
      logo: '💻',
      type: '科技服务团队',
      description: '推广科技知识，提供电脑维修、智能手机教学等科技惠民服务。',
      tags: ['科技普及', '电脑维修', '智能教学'],
      members: 45,
      activities: 32,
      hours: 980,
      rating: 4.6,
      leader: '刘工程师',
      verified: false,
      followed: false,
      category: '科技服务'
    },
    {
      id: 6,
      name: '绿色环保行动队',
      logo: '🌱',
      type: '环保公益团队',
      description: '倡导绿色生活，组织环保宣传、垃圾分类和植树造林等活动。',
      tags: ['环保宣传', '垃圾分类', '绿色生活'],
      members: 98,
      activities: 55,
      hours: 1750,
      rating: 4.8,
      leader: '赵队长',
      verified: true,
      followed: false,
      category: '志愿服务'
    }
  ]
})

const filteredTeams = computed(() => {
  let result = state.teamList

  // Filter by tab
  if (state.activeTab > 0) {
    const category = state.tabs[state.activeTab]
    result = result.filter((t) => t.category === category)
  }

  // Filter by search
  if (state.searchKeyword) {
    result = result.filter((t) => t.name.includes(state.searchKeyword))
  }

  // Filter by type
  if (state.selectedType > 0) {
    const type = state.teamTypes[state.selectedType]
    result = result.filter((t) => t.category === type)
  }

  return result
})

state.filteredTeams = filteredTeams

const handleSearch = () => {
  console.log('Searching:', state.searchKeyword)
}

const handleTabChange = (index) => {
  state.activeTab = index
}

const handleTeamClick = (team) => {
  sheep.$router.go(`/pages/cmt/team-detail?id=${team.id}`)
}

const handleFollow = (team) => {
  team.followed = !team.followed
  uni.showToast({
    title: team.followed ? '关注成功' : '取消关注',
    icon: 'success'
  })
}

const handleJoin = (team) => {
  sheep.$router.go(`/pages/cmt/team-join?id=${team.id}`)
}

const handleResetFilter = () => {
  state.selectedType = 0
  state.selectedSize = 0
}

const handleApplyFilter = () => {
  state.showFilter = false
}
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;

  .search-box {
    flex: 1;
    background: white;
    border-radius: 40rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .search-input {
      flex: 1;
      font-size: 28rpx;
    }

    .search-icon {
      font-size: 32rpx;
      color: #ff6b00;
    }
  }

  .filter-icon {
    background: white;
    border-radius: 40rpx;
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #ff6b00;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  }
}

.tab-bar {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 24rpx;
  padding: 20rpx;
  display: flex;
  gap: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  white-space: nowrap;

  .tab-item {
    flex-shrink: 0;
    text-align: center;
    padding: 16rpx 32rpx;
    border-radius: 16rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f5f5;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
    }
  }
}

.stats-section {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  .stat-item {
    text-align: center;

    .stat-value {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #ff6b00;
      margin-bottom: 8rpx;
    }

    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.team-list {
  margin: 0 30rpx 30rpx;

  .team-card {
    background: white;
    border-radius: 32rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s;

    .team-header {
      display: flex;
      align-items: center;
      gap: 24rpx;
      margin-bottom: 24rpx;

      .team-logo {
        width: 100rpx;
        height: 100rpx;
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48rpx;
        flex-shrink: 0;
      }

      .team-info {
        flex: 1;

        .team-name-row {
          display: flex;
          align-items: center;
          gap: 12rpx;
          margin-bottom: 8rpx;

          .team-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }

          .verified-badge {
            width: 32rpx;
            height: 32rpx;
            background: linear-gradient(135deg, #52c41a, #73d13d);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20rpx;
          }
        }

        .team-type {
          font-size: 24rpx;
          color: #999;
        }
      }

      .follow-btn {
        padding: 12rpx 24rpx;
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        color: white;
        border: none;
        border-radius: 30rpx;
        font-size: 24rpx;

        &.followed {
          background: #f0f2f5;
          color: #666;
        }
      }
    }

    .team-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }

    .team-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin-bottom: 24rpx;

      .tag {
        padding: 8rpx 20rpx;
        background: #fff3e0;
        color: #ff6b00;
        border-radius: 20rpx;
        font-size: 22rpx;
      }
    }

    .team-stats {
      display: flex;
      justify-content: space-around;
      padding: 24rpx 0;
      border-top: 1px solid #f0f2f5;
      border-bottom: 1px solid #f0f2f5;
      margin-bottom: 24rpx;

      .stat {
        text-align: center;

        .stat-icon {
          font-size: 28rpx;
          margin-right: 8rpx;
        }

        .stat-text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .team-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .team-leader {
        .leader-label {
          font-size: 24rpx;
          color: #999;
          margin-right: 8rpx;
        }

        .leader-name {
          font-size: 24rpx;
          color: #333;
          font-weight: bold;
        }
      }

      .join-btn {
        padding: 12rpx 32rpx;
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        color: white;
        border: none;
        border-radius: 30rpx;
        font-size: 24rpx;
      }
    }
  }
}

.filter-popup {
  padding: 40rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .reset-btn {
      font-size: 28rpx;
      color: #ff6b00;
    }
  }

  .filter-section {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      display: block;
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;

      .option-item {
        padding: 12rpx 24rpx;
        border-radius: 30rpx;
        background: #f0f2f5;
        font-size: 24rpx;
        color: #666;

        &.active {
          background: linear-gradient(135deg, #ff6b00, #ffa726);
          color: white;
        }
      }
    }
  }

  .popup-footer {
    .confirm-btn {
      width: 100%;
      padding: 24rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      border: none;
      border-radius: 40rpx;
      font-size: 28rpx;
    }
  }
}
</style>
